<template>
  <div class="animated fadeIn">
    <div class="card card-accent-primary">
      <div class="card-header">
        <i class="fa fa-align-justify"></i> 添加分组
      </div>
      <div class="card-body">
        <Form ref="validate" label-position="left" :label-width="80" :model="formItems" :rules="rules">
          <div class="col-sm-6">
            <formItem label="分组名称:" prop="title">
              <Input type="text" v-model="formItems.title"></Input>
            </formItem>
            <formItem label="分组规则:">
              <CheckboxGroup v-model="formItems.rules" v-for="(item, index) in authRule" :key="index">
                <Checkbox :label="item.ar_id">{{item.ar_title}}</Checkbox>
              </CheckboxGroup>
            </formItem>
            <formItem>
              <i-button type="primary" @click="submit('validate')">提交</i-button>
              <i-button type="ghost" style="margin-left: 8px" @click="goback()">返回</i-button>
            </formItem>
          </div>
        </Form>
      </div>
    </div>
  </div>
</template>
<script>
import Mixin from 'common/js/mixin'
export default {
  data () {
    return {
      formItems: {
        title: '',
        rules: []
      },
      rules: {
        title: [
          {required: true, message: '请填写分组名称', trigger: 'blur'}
        ]
      },
      authRule: []
    }
  },
  methods: {
    submit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$post('/api/admin/authGroup', {
            title: this.formItems.title,
            rules: this.formItems.rules.join()
          }).then((res) => {
            if (res) {
              this.$Message.success({
                content: res.mess,
                onClose: () => {
                  this.$router.push({name: 'authGroupIndex'})
                }
              })
            }
          })
        }
      })
    },
    getAuthRule () {
      this.$get('/api/admin/authRule', {page: 'nopage'}).then((res) => {
        this.authRule = res.data.data
      })
    }
  },
  created () {
    this.getAuthRule()
  },
  mixins: [Mixin]
}
</script>
